<template>
  <!-- 题库预览对话框 -->
  <div>
    <el-row>
      <el-col :span="6">
        <span>【题型】:</span>
        <span v-for="(item, index) in questionType" :key="index">
          {{ Number(dataList.questionType) === item.value ? item.label : '' }}
        </span>
      </el-col>
      <el-col :span="6">
        <span>【编号】:</span>
        <span>
          {{ dataList.id }}
        </span>
      </el-col>
      <el-col :span="6">
        <span>【难度】:</span>
        <span v-for="(item, index) in difficulty" :key="index">
          {{ Number(dataList.difficulty) === item.value ? item.label : '' }}
        </span>
      </el-col>
      <el-col :span="6">
        <span>【标签】:</span>
        <span>{{ dataList.tags }}</span>
      </el-col>
    </el-row>
    <el-row style="margin-top:20px">
      <el-col :span="6">
        <span>【学科】:</span>
        <span>
          {{ dataList.subjectName }}
        </span>
      </el-col>
      <el-col :span="6">
        <span>【目录】:</span>
        <span>
          {{ dataList.directoryName }}
        </span>
      </el-col>
      <el-col :span="6">
        <span>【方向】:</span>
        <span>{{ dataList.direction }}</span>
      </el-col>
    </el-row>
    <el-row>
      <hr>
      <span>【题干】:</span>
      <div style="color:blue" v-html="dataList.question"></div>
    </el-row>
    <el-row v-if="Number(dataList.questionType) !== 3">
      <span v-for="(item, index) in questionType" :key="index">
          {{ Number(dataList.questionType) === item.value ? `${item.label}题` : '' }}
      </span>
      <span>选项: (以下选中的选项为正确答案)</span>
    </el-row>
    <el-row v-if="Number(dataList.questionType) === 1">
      <el-radio-group :value='1'>
        <el-row v-for="(item, index) in options" :key="index" style="margin-top:10px">
          <el-radio :label="item.isRight">{{item.title}}</el-radio>
        </el-row>
      </el-radio-group>
    </el-row>
    <!-- 多选 -->
    <el-row v-else-if="Number(dataList.questionType) === 2" style="margin-top:10px">
      <el-checkbox-group :value='[1]'>
        <el-row v-for="(item, index) in options" :key="index">
          <el-checkbox :label="item.isRight">{{item.title}}</el-checkbox>
        </el-row>
      </el-checkbox-group>
    </el-row>
    <el-row>
      <hr>
      <span>【参考答案】:</span>
      <el-button type="danger" size="small" @click="hShow" v-if="dataList.videoURL !== ''">视频答案预览</el-button>
      <span v-else>无</span>
      <div style="margin-top:20px" v-if="isShow">
        <video :src="dataList.videoURL" autoplay width="400" controls></video>
      </div>
    </el-row>
    <el-row>
      <hr>
      <div class="div_text">
        <div>【答案解析】:</div>
        <div v-html='dataList.answer' class="div_span"></div>
      </div>
    </el-row>
    <el-row>
      <hr>
      <span>【题目备注】:</span>
      <span v-html="dataList.remarks"></span>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="hSubmit">关 闭</el-button>
    </span>
  </div>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants'
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'questions-preview',
  props: ['subID'],
  data () {
    return {
      dataList: [],
      options: [],
      isShow: false
    }
  },
  created () {
    this.loadData()
  },
  computed: {
    questionType () {
      return questionType
    },
    difficulty () {
      return difficulty
    }
  },
  methods: {
    // 初始化加载数据
    async loadData () {
      const data = {
        id: this.subID
      }
      try {
        await detail(data).then((res) => {
          this.dataList = res.data
          this.options = res.data.options
        }).catch(err => {
          console.log(err)
        })
      } catch (err) {
        console.log(err)
      }
    },
    hShow () {
      this.isShow = true
    },
    hSubmit () {
      this.dataList.videoURL = ''
      this.$emit('close')
    }
  }
}
</script>

<style lang="css" scoped>
  .dialog-footer {
    display:block;
    text-align: right;
    margin-top: 30px;
  }
  .div_text {
    display: flex;
    align-items: center;
  }

  .el-row /deep/ .btn {
    display: none;
  }
</style>
